import React, {Component} from 'react';
import Button from 'antd/lib/button';
import { Table, Modal, Input, Icon } from 'antd';
import {postDataV2 as postData} from '../../../utils/request';
import { cmdList, createCmd, deleteCmd, updateCmd } from '../../../utils/queryData';
import './index.scss';

export default class Cmd extends Component {
  state = {
    page: 1,
    pageSize: 10,
    cmdList:[],
    modalVisible: false,
    formObj: {
      code: '',
      description: ''
    }
  }
  addCmd = ()=>{
    this.setState({modalVisible: true, formObj: {
      code: '',
      description: ''
    }})

  }
  //  创建，编辑cmd
  handleOk = ()=>{
    let { id, code, description } = this.state.formObj;
    let query = id ? updateCmd(id, {code, description}) : createCmd({code, description})
    postData('', {query}).then(res=>{
      this.getCmdList();
    })
    this.setState({modalVisible: false, formObj: {
      code: '',
      description: ''
    }})
  }
  handleCancel = ()=>{
    this.setState({modalVisible: false})
  }
  onChangeCmdCode = (e) => {
    this.setState({
      formObj: {
        ...this.state.formObj,
        code: e.target.value
      }
    })
  }
  onChangeCmdDesc = (e) => {
    this.setState({
      formObj: {
        ...this.state.formObj,
        description: e.target.value
      }
    })
  }
  cleanCmdInput = ()=>{
    this.setState({
      formObj: {
        ...this.state.formObj,
        cmd: ''
      }
    })
  }
  getCmdList = ()=>{
    let { page, pageSize } = this.state;
    postData('', {query: cmdList({page, pageSize})}).then(res=>{
      this.setState({
        cmdList: res.data.cmd.list
      })
    })
  }
  deleteCmdFnc = (props)=>{
    Modal.confirm({
      title: '提示',
      content: '确定删除该cmd吗',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: ()=>{
        postData('', {query: deleteCmd(props.id)}).then(res=>{
          this.getCmdList();
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  editCmd = ({id, code, description}) => {
    this.setState({
      modalVisible: true,
      formObj: {
        id, 
        code, 
        description
      }
    })
  }
  componentDidMount(){
    this.getCmdList();
  }
  render () {
    const { cmdList, modalVisible, formObj } = this.state;
    const columns = [{
      title: 'Cmd',
      dataIndex: 'code',
    }, {
      title: '描述',
      dataIndex: 'description',
    }, {
      title: '操作',
      dataIndex: '',
      render: (props) => <div><Button type="primary" onClick={()=>{this.editCmd(props)}}>编辑</Button>&nbsp;&nbsp;<Button type="danger" onClick={()=>{this.deleteCmdFnc(props)}}>删除</Button></div>,
    }];
    return (
      <div className="cmd-index">
        <Button type="primary" onClick={this.addCmd}>CMD添加</Button>
        <h3>CMD列表</h3>
        <div>
          <Table
            width="500px"
            columns={columns}
            dataSource={cmdList}
            bordered
          />
        </div>
        <Modal
          width="400px"
          title="添加/编辑cmd"
          visible={modalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          cancelText="取消"
          okText="确认"
        >
          <div className="modal-inner">
            <Input
              placeholder="输入cmd"
              prefix={<Icon type="android" style={{ color: 'rgba(0,0,0,.25)' }} />}
              suffix={!!formObj.code ? <Icon type="close-circle" onClick={this.cleanCmdInput} /> : null}
              value={formObj.code}
              onChange={this.onChangeCmdCode}
              ref={node => this.userNameInput = node}
            />
            <Input.TextArea  
              onChange={this.onChangeCmdDesc}
              placeholder="输入cmd对应的描述" 
              value={formObj.description} 
              autosize={{ minRows: 2, maxRows: 6 }} 
            />
          </div>
        </Modal>
      </div>
    );
  }
}
